<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>图片轮换</title>
	<style type="text/css">
	  body,div,ul,ol,li{list-style: none;}
     .all{ width: 1015px; height: 577px;margin: 0 auto;
     	 color: #ccc;background-color: red;position: relative;}
     .all ul li{position: absolute;left: 0px;}

     .all ol{position: absolute;z-index: 30;right: 200px;bottom: 20px;list-style: none;}
     .all ol li{float: left; width: 20px;height: 20px; background: #333;
     	border: 1px solid #ccc;font-weight:bold;text-align: center; 
        cursor: pointer;margin: 0px 10px;}
     .all ol .current{ width: 30px;height: 30px;color: #760;text-align: center;
     		line-height:30px;border: 1px solid #760;margin-top: 0; z-index: 30;}
	</style>
	<script type="text/javascript" src="jquery-1.11.3.js"></script>
<script type="text/javascript">
	$(function(){
		var num1 = 6;
		$('ol li').mouseover(function(e){
			//attr() 方法设置或返回被选元素的属性值。
			$(this).attr('class','current');//改变选中li的属性class
			$(this).siblings().attr('class','');
			var num=$(this).index();//获取索引值
			num1++
			$(this).parent().css('z-index',num1);
		    $('ul li').eq(num).css('z-index',num1);//让所选中的li的索引值最大
		    console.log(num1);
		    if (num1>=100) {
		    	num1=6
		    	 $('ul li').css('z-index',5);
		    }
		});
	})
</script>

</head>
<body>
	<div class="all">
		<ul>
			<li><img src="images/01.png" width="1015" height="577" /></li>
			<li><img src="images/02.jpg" width="1015" height="577" /></li>
			<li><img src="images/03.png" width="1015" height="577" /></li>
			<li><img src="images/04.png" width="1015" height="577" /></li>
			<li><img src="images/05.jpg" width="1015" height="577" /></li>
		</ul>
	<ol>	
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li class="current">5</li>
	</ol>
	</div> 
</body>
</html>